import React, { useState, useEffect, useRef } from "react";
import { message } from "antd";
import { PageContainer, FooterToolbar } from "@ant-design/pro-layout";
import ProForm, {
  ProFormDigit,
  ProFormRadio,
  ProFormDependency,
  ProFormText,
} from "@ant-design/pro-form";
import { fetchInfo, update } from "@/api/depost";
import { ProCard } from "@ant-design/pro-components";

export default () => {
  const formRef = useRef();

  const getInfo = async () => {
    const res = await fetchInfo();
    if (res.data) {
      formRef.current.setFieldsValue(res.data);
    }
  };
  useEffect(() => {
    getInfo();
  }, []);
  const handleAddOrUpdate = async (fields) => {
    const postData = {
      ...fields,
    };
    const res = await update(postData);
    if (res.data) {
      message.success("提交成功");
    }
  };
  return (
    <PageContainer>
      <ProCard>
        <ProForm
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 8,
          }}
          layout="horizontal"
          formRef={formRef}
          submitter={{
            render: (_, dom) => <FooterToolbar>{dom[1]}</FooterToolbar>,
          }}
          onFinish={async (values) => {
            return await handleAddOrUpdate(values);
          }}
          initialValues={{
            timeLimit: 1,
          }}
        >
          <ProFormText name="id" hidden />
          <ProFormDigit
            label="押金金额"
            name="depositPrice"
            placeholder="请输入押金金额"
            min={0.01}
            addonAfter="元"
            fieldProps={{
              precision: 2,
            }}
            rules={[{ required: true, message: "请输入押金金额" }]}
          />
          <ProFormDependency name={["depositPrice"]}>
            {({ depositPrice }) => {
              return (
                <ProFormDigit
                  label="押金下限"
                  name="depositLower"
                  placeholder="请输入押金下限"
                  min={0.01}
                  max={depositPrice}
                  addonAfter="元"
                  fieldProps={{
                    precision: 2,
                  }}
                  rules={[{ required: true, message: "请输入押金下限" }]}
                />
              );
            }}
          </ProFormDependency>
        </ProForm>
      </ProCard>
    </PageContainer>
  );
};
